<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区域 -->
      <el-card class="box-card">
        <!-- gutter:列的间距，单位是像素 -->
        <!-- 按钮区域 -->
        <el-row>
          <el-col>
            <el-button
              type="primary"
              size="mini"
              @click="$router.push('/questions/new')"
            >{{ $t('question.newadd') }}</el-button>
            <el-button type="danger" size="mini">{{ $t('question.manyadd') }}</el-button>
          </el-col>
        </el-row>
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            学科：
            <el-select v-model="searchForm.subjectID" placeholder="请选择" class="wd">
              <el-option
                v-for="item in subjectIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            难&nbsp;&nbsp;&nbsp;&nbsp;度：
            <el-select v-model="searchForm.difficulty" placeholder="请选择" class="wd">
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            试题类型：
            <el-select v-model="searchForm.questionType" placeholder="请选择" class="wd">
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签：
            <el-select v-model="searchForm.tags" placeholder="请选择" class="wd">
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            城市：
            <el-select
              @change="searchForm.city=''"
              v-model="searchForm.province"
              placeholder="选城市"
              style="width:90px"
            >
              <el-option v-for="(item,k) in provinces()" :key="k" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="searchForm.city" placeholder="选地区" style="width:90px">
              <el-option
                v-for="(item,k) in citys(searchForm.province)"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            关键字：
            <el-input type="text" v-model="searchForm.keyword" class="wd"></el-input>
          </el-col>
          <el-col :span="6">
            题目备注：
            <el-input type="text" v-model="searchForm.remarks" class="wd"></el-input>
          </el-col>
          <el-col :span="6">
            企业简称：
            <el-input type="text" v-model="searchForm.shortName" class="wd"></el-input>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            方向：
            <el-select v-model="searchForm.direction" placeholder="请选择" class="wd">
              <el-option v-for="(item,k) in directionList" :key="k" :value="item" :label="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            录入人：
            <el-select v-model="searchForm.creatorID" placeholder="请选择" class="wd">
              <el-option
                v-for="item in creatorIDList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            二级目录：
            <el-select v-model="searchForm.catalogID" placeholder="请选择" class="wd">
              <el-option
                v-for="item in catalogIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button size="mini">清除</el-button>
            <el-button size="mini" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </el-card>
      <!-- table表格区域 -->
      <el-table :data="questionList" style="width:100%">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <!-- formatter是el-table-column提供的属性，必须使用:绑定 
             属性的值是methods方法，注意：不能设置()括号
             formatter属性可以对当前的column列的数据做二次更新
        -->
        <el-table-column :formatter="questionTypeFMT" label="题型" prop="questionType"></el-table-column>
        <el-table-column label="题干" prop="question"></el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="170">
          <!-- 过滤器的使用场合限制：{{}}、:冒号属性绑定 -->
          <!-- 通过“作用域插槽”来获取el-table-column标签的内容区域中的某个字段信息:当前是addDate -->
          <template slot-scope="scope">
            <!-- scope.row:就是通过遍历获取到的每个题库信息数据，是对象 -->
            <!-- scope.row.xxx:就是获取的指定的信息字段 -->
            <!-- row 是关键字，是做衔接用的，始终需要存在 -->
            {{scope.row.addDate | parseTimeByString}}
            <!-- {{scope.row.addDate | parseTimeByString('{y}-{m}-{d}')}}  -->
          </template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty" :formatter="difficultyFMT"></el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <a href="#">预览</a>
            <a href="#">修改</a>
            <!-- prevent:阻止默认行为 -->
            <a href="#" @click.prevent="del(scope.row)">删除</a>
            <a href="#">加入精选</a>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.page"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="searchForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// 导入"学科"api
import { simple } from '@/api/hmmm/subjects.js'
// 导入"难度"、"试题类型"常量，并设置别名
import {
  difficulty as difficultyList, // as 设置别名
  questionType as questionTypeList
} from '@/api/hmmm/constants.js'
// 导入"标签"信息,并设置别名
import { simple as tagsSimple } from '@/api/hmmm/tags'
// 导入"录入人"信息,并设置别名
import { simple as usersSimple } from '@/api/base/users'
// 导入"二级目录"信息,并设置别名
import { simple as directorysSimple } from '@/api/hmmm/directorys'
// 导入"方向"常量信息,并设置别名
import { direction as directionList } from '@/api/hmmm/constants'
// 导入"省份/城市"信息,并设置别名
import { provinces, citys } from '@/api/hmmm/citys'
// 基础题库相关api导入
import { list } from '@/api/hmmm/questions'
// 导入“删除基础试题”的api
import { remove } from '@/api/hmmm/questions'

export default {
  name: 'QuestionsList',
  data() {
    return {
      questionList: [], // 基础题库列表信息

      // 创建成员List，接收学科列表数据
      subjectIDList: [],
      // difficultyList: difficulty(原写法)
      difficultyList, // 难度(简易成员赋值)
      questionTypeList, // 试题类型(简易成员赋值)
      tagsList: [], // 标签
      creatorIDList: [], // 录入人
      catalogIDList: [], // 二级目录
      directionList, // 方向(简易成员赋值)
      // provinces, // 城市(简易成员赋值) 原写法：provinces:provinces
      // cityList: [], // 地区

      total: 0, // 数据的总条数

      // 搜索表单的数据
      searchForm: {
        // 字段名来自api接口
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        province: '', // 城市
        city: '', // 地区
        keyword: '', // 关键字
        remarks: '', // 备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '', // 二级目录
        page: 1, // 默认获取第1页数据
        pagesize: 3 // 默认每页获得3条数据
      }
    }
  },
  created() {
    // 获得"学科"列表
    this.getSubjectIDList()
    // 获得"标签"列表
    this.getTagsList()
    // 获得"录入人"列表
    this.getCreatorIDList()
    // 获得"二级目录"列表
    this.getCatalogIDList()
    // 获得 基础题库 列表信息
    this.getQuestionList()
  },
  watch: {
    // 对searchForm里的所有成员做深度监听
    // 通过监听每一个成员的变化，来实现数据的自动更新
    // 要监听data中的哪个数据，就直接写哪个数据
    searchForm: {
      // handler:function(){} 和 deep:true 为固定写法
      handler: function(newValue, oldValue) {
        // 调用getQuestionList()函数，根据变化后的条件，重新获得数据并渲染页面
        this.getQuestionList()
      },
      deep: true
    }
  },
  methods: {
    // 1.获得 学科 列表
    async getSubjectIDList() {
      // 调用api(result没有特殊处理，就接收Promise对象)
      const result = await simple()
      // console.log(result)
      // data接收数据
      this.subjectIDList = result.data
    },
    // 2.获得 标签 列表数据
    async getTagsList() {
      const result = await tagsSimple() // Promise对象
      // console.log(result)
      this.tagsList = result.data
    },
    // 3.获得 录入人 列表数据
    async getCreatorIDList() {
      const result = await usersSimple()
      // console.log(result)
      this.creatorIDList = result.data
    },
    // 4.获得 二级目录 列表数据
    async getCatalogIDList() {
      const result = await directorysSimple()
      // console.log(result)
      this.catalogIDList = result.data
    },
    // 5.获得 城市 信息(原先的调用方法)
    // 这个pname形参就代表被选中的省份信息
    // getCitys(pname) {
    //   this.searchForm.city = '' // 清除之前选取好的城市
    //   this.cityList = citys(pname)
    // }

    // 对城市，区县的api函数做接收，对象成员“简易赋值”
    // 不要设置默认值
    // 这两个方法在template模板中可以直接使用(因为citys.js 直接导出的就是函数)
    provinces,
    citys,

    // 6.获得"基础题库"列表信息
    async getQuestionList() {
      // 把查询数据的条件当作参数配置给list方法，通过监听每一个表单的数据变化，来实现数据的自动更新
      const result = await list(this.searchForm)
      // console.log(result)
      // 把获得好的题库列表信息赋予给 questionList 成员
      this.questionList = result.data.items
      this.total = result.data.counts
    },
    // 7. 对“题型”数据做二次更新
    // 把题型的数字转换为汉字,(cellValue)表示正在被处理的单元信息
    // row:代表获得的每一条题库数据列表，是对象
    // cellValue与row.questionType的值是一致的
    // index：代表各个列的序号信息，从0开始计数
    // return:返回的信息，就可以覆盖渲染到模板的对应位置，进而实现数据的二次更新效果
    questionTypeFMT(row, column, cellValue, index) {
      // cellValue=1  --->单选--->下标0[cellValue-1]
      // cellValue=2  --->多选--->下标1[cellValue-1]
      // cellValue=3  --->简答--->下标2[cellValue-1]
      return this.questionTypeList[cellValue - 1].label
    },
    // 8."难度"数字转汉字
    difficultyFMT(row, column, cellValue) {
      return this.difficultyList[cellValue - 1]['label']
    },
    // 9. 删除试题
    // question：被删除试题的整条记录对象
    del(question) {
      // 确认框
      this.$confirm('确认要删除该记录么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发送请求，调用remove的api方法，实现删除
          const result = await remove(question)
          // console.log(result)
          // 提示信息
          this.$message.success('删除成功')
          // 重新渲染页面
          this.getQuestionList()
        })
        .catch(() => {})
    },
    // 10.每页条数变化回调处理
    handleSizeChange(val) {
      // val：变化后的每页条数
      // 表单成员接收
      this.searchForm.pagesize = val
    },
    // 11.当前页码变化的回调处理
    handleCurrentChange(newPage) {
      // newPage: 变化后的当前页码
      // 表单成员接收
      this.searchForm.page = newPage
    }
  }
}
</script>

<style scoped>
.wd {
  width: 170px;
}
.el-row {
  margin-bottom: 10px;
}
.el-table {
  margin-top: 25px;
}
.el-pagination {
  margin-top: 15px;
}
</style>
